<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/search-wpy.css">
    
</head>
<style>

    /*修改提示文字的颜色*/
    
    input::-webkit-input-placeholder { /* WebKit browsers */ 
    
    color: #aaa; 
    font-size: .65rem;
    
    } 
    
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    
    color: #aaa; 
    font-size: .65rem;
    } 
    
    input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    
    color: #aaa; 
    font-size: .65rem;
    } 
    
    input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    
    color: #aaa; 
    font-size: .65rem;
    } 
    
    </style>

<body>
    <div class="nav">
            <div>
                <img src="img/sousuo.png" alt="">
                <input type="text" name="" id="" placeholder="漫威">
            </div>
            <a href="./tab-with-segmented-control.html" style="text-decoration: none;">取消</a>
    </div>
    <div class="end">
        <div class="hot">
            热门搜索
        </div>
        <div class="record">
            <ul>
                <li>
                    <p>神奇女侠1984</p>
                    <img src="https://p0.meituan.net/scarlett/6d731142e606d97abaf572799c73052f460.png" alt="">
                </li>
                <li>
                    <p>汪汪队立大功</p>
                    <img src="https://p0.meituan.net/scarlett/6d731142e606d97abaf572799c73052f460.png" alt="">
                </li>
                <li>
                    <p>哆啦A梦</p>
                    <img src="https://p0.meituan.net/scarlett/6d731142e606d97abaf572799c73052f460.png" alt="">
                </li>
            </ul>
        </div>
        <div class="hot">
            常用分类
        </div>
        <div class="photo-list">
            <ul>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
                <li>
                    <img src="https://p1.meituan.net/scarlett/d7fc991bffb8d53746c36ccbd6275b322404.png
                    " alt="">
                    <p>推荐</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/mui.min.js"></script>
    <script>
        // 在iphone6 375宽度中  html是以20px作为基本单位
        (function () {
            function w() {
                var all = document.documentElement;  // 获取html元素
                var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
                //             console.log(123,test)
                if (test > 1024) {
                    test = 1024;
                }
                rem = test / 18.75;
                console.log(rem)
                all.style.fontSize = rem + 'px'
            }
            w();
            window.addEventListener("resize", function () {
                w()
            }, false)
        })();

    </script>
</body>

</html>